<!--
 * @Description: 
 * @Author: yeke
 * @Date: 2023-07-19 17:45:38
 * @LastEditors: 1960116313@qq.com 1960116313@qq.com
 * @LastEditTime: 2023-10-24 16:53:17
-->
<template>
  <view class="login-content">
    <u-form :model="formData" ref="formRef">
      <u-form-item prop="username">
        <u-icon
          class="icon"
          :size="32"
          name="/static/images/icon/icon_user.png"
        />
        <u-input
          class="input-width"
          v-model="formData.username"
          placeholder="请输入账号/手机号码"
        />
      </u-form-item>
      <u-form-item prop="password">
        <u-icon
          class="icon"
          :size="32"
          name="/static/images/icon/icon_password.png"
        />
        <u-input
          class="input-width"
          v-model="formData.password"
          type="password"
          placeholder="请输入密码"
        />
      </u-form-item>
    </u-form>
    <!-- <view class="operation" @click="goPath('/pages/forget_pwd/forget_pwd')">
      忘记密码？
    </view> -->
    <view class="btn">
      <u-button type="primary" shape="circle" @click="handleLogin">
        登 录
      </u-button>
    </view>
    <!-- <view
      class="operation operation-center"
      @click="goPath('/pages/register/register')"
    >
      没有账号？点击注册
    </view> -->
    <view class="agreement-box">
      <u-checkbox v-model="isCheckAgreement" shape="circle">
        <view class="content">
          我已同意
          <view @click.stop>
            <navigator
              class="link"
              hover-class="none"
              url="/packages/pages/agreement/agreement?type=user"
            >
              《青鸟翼联用户协议》
            </navigator>
          </view>
        </view>
      </u-checkbox>
    </view>
    <agreement-modal
      v-model:modalShow="modalShow"
      @change:confirm-modal="confirmModal"
    ></agreement-modal>
  </view>
</template>

<script setup>
import { onReady } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { userStore } from "@/store/user/user";
import md5 from "js-md5";
const useuserStore = userStore();
const formRef = ref();
const isCheckAgreement = ref(false);
const modalShow = ref(false);
const formData = reactive({
  username: "",
  password: "",
});

const rules = reactive({
  username: [
    {
      required: true,
      message: "请输入账号/手机号",
      trigger: ["change", "blur"],
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: ["change", "blur"] },
  ],
});

const handleLogin = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (!isCheckAgreement.value) {
        modalShow.value = true;
        return;
      }
      loginFun();
    }
  });
};

/**
 * @description: 登录操作
 */
const loginFun = async () => {
  uni.showLoading({
    title: "正在登录中...",
  });
  // const md5 = new Md5();
  const params = {
    ...formData,
    password: md5(formData.password),
    grant_type: "password",
    type: "account",
  };
  await useuserStore.login(params);
  uni.hideLoading();
  uni.$u.toast("登录成功");
  uni.reLaunch({
    url: "/pages/index/index",
  });
};

const confirmModal = () => {
  isCheckAgreement.value = true;
  loginFun();
};

const goPath = (path) => {
  uni.navigateTo({
    url: path,
  });
};

onReady(() => {
  formRef.value.setRules(rules);
});
</script>

<style lang="scss" scoped>
.login-content {
  margin-top: 20rpx;
}
.operation {
  color: $u-type-primary;
  text-align: right;
  margin-top: 30rpx;
}
.operation-center {
  text-align: center;
  margin-top: 40rpx;
}
.icon {
  margin-right: 30rpx;
}
.btn {
  margin-top: 40rpx;
}

.agreement-box {
  margin-top: 30rpx;
  .content {
    display: flex;
  }
}
.link {
  color: $u-type-primary;
}
.slot-content {
  padding: 30rpx;
  line-height: 50rpx;
  font-size: 28rpx;
}
</style>
